﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestFormly1.aspx.cs" Inherits="WebTest.TestFormly1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <asp:PlaceHolder ID="PlaceHolder1" runat="server"> 
        <%: System.Web.Optimization.Scripts.Render("~/bundles/JQuery") %>          
        <%: System.Web.Optimization.Scripts.Render("~/bundles/JQueryUI") %>                
        <%: System.Web.Optimization.Styles.Render("~/bundles/Formly/css") %>
        <%: System.Web.Optimization.Scripts.Render("~/bundles/Formly") %>
    </asp:PlaceHolder>
          
<%--    <link type="text/css" rel="stylesheet" href="/Styles/bootstrap-datetimepicker.css" />
    <script type="text/javascript" lang="javascript" src="/Scripts/DalotsDateTimePicker/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" lang="javascript" src="Scripts/DalotsDateTimePicker/locales/bootstrap-datetimepicker.it.js"></script>--%>

    <link type="text/css" rel="stylesheet" href="assets/css/bootstrap/bootstrap.min.css" />
    <link type="text/css" rel="stylesheet" href="assets/css/bootstrap/bootstrap-themes.css" />
    <link type="text/css" rel="stylesheet" href="assets/css/style.css" />

    <script type="text/javascript" src="assets/plugins/bootstrap/bootstrap.min.js"></script>

    <script type="text/javascript" lang="javascript" src="/Scripts/Formly/FormlyHelper.js"></script>
    <script type="text/javascript" lang="javascript" src="/Scripts/GrayParrot.Core.js"></script> 
    <script type="text/javascript" lang="javascript" src="/Scripts/GrayParrot.AngularJS.Directives.FileUpload.js"></script> 
    <script type="text/javascript" lang="javascript" src="/Scripts/GrayParrot.AngularJS.Directives.DateTimePicker.js"></script>
    <script type="text/javascript" lang="javascript" src="/Scripts/GrayParrot.AngularJS.js"></script> 

    <%--<script src="//npmcdn.com/angular-base64-upload@latest/dist/angular-base64-upload.js"></script>--%>

    <title>Referto Errato</title>

      <style>
          body {
            margin: 10px
          }

          .formly-field {
            margin-bottom: 1px;
          }

          .formly.row{
            display:block;
          }

          .formly-field.section-label {
            margin-bottom: 8px
          }

        .btn-file {
            position: relative;
            overflow: hidden;
        }
        .btn-file input[type=file] {
            position: absolute;
            top: 0;
            right: 0;
            min-width: 100%;
            min-height: 100%;
            font-size: 100px;
            text-align: right;
            filter: alpha(opacity=0);
            opacity: 0;
            outline: none;
            background: white;
            cursor: inherit;
            display: block;
        }
      </style>
</head>

<body ng-app="formlyExample" id="divFormly" name="divFormly">

	<div class="tabbable">
			<ul class="nav nav-tabs">
					<li class="active">
                        <a href="#divFormly1" data-toggle="tab">Home</a>
					</li>
					<li>
                        <a href="#divFormly2" data-toggle="tab">Profile</a>
					</li>
			</ul>
			<div class="tab-content">
                    <div id="divFormly1" name="divFormly1" class="tab-pane fade in active" ng-include="'Templates\\Template1.html'" />
                    <div id="divFormly2" name="divFormly2" class="tab-pane fade in" ng-include="'Templates\\Template2.html'">
			</div>
	</div>

<%--    <table>
        <tr>
            <td style="vertical-align:top">
                <div ng-controller="MainCtrl2 as vm" id="divFormly2" name="divFormly2">
                                        <div ng-if="vm.loadingData.$$state.status === 0" style="margin:20px 0;font-size:2em">
                                            <strong>Loading...</strong>
                                        </div>
                                        <div ng-if="vm.loadingData.$$status.state !== 0">
                                            <form ng-submit="vm.onSubmit()" novalidate id="form1">
                                                <formly-form model="vm.model" fields="vm.fields" form="vm.form">
                                                <button type="sumbit" class="btn btn-primary submit-button" ng-disabled="vm.form.$invalid">Invia</button> <!-- ng-click="ok()" -->
                                                <button type="button" class="btn" onclick="Reset2()" >Reset</button>
                                                 <button type="button" class="btn" ng-click="vm.onReset()">Reset</button>
                                                </formly-form>
                                            </form>
                                        </div>
                                        <img id="img2" class="img-thumbnail" src="http://placehold.it/350x150/7ba9d0/fff?text=Select+an+image+%3A%29" style="width:auto;height:auto;max-width:350px;max-height:250px" />


                </div>
                </td>
            <td style="vertical-align:top">
                <div ng-controller="MainCtrl as vm" id="divFormly1" name="divFormly1">
                                            <div ng-if="vm.loadingData.$$state.status === 0" style="margin:20px 0;font-size:2em">
                                                <strong>Loading...</strong>
                                            </div>
                                            <div ng-if="vm.loadingData.$$status.state !== 0">
                                                <form ng-submit="vm.onSubmit()" novalidate id="form2">
                                                    <formly-form model="vm.model" fields="vm.fields" form="vm.form">
                                                    <button type="sumbit" class="btn btn-primary submit-button" ng-disabled="vm.form.$invalid">Invia</button> <!-- ng-click="ok()" -->
                                                    <button type="button" class="btn" ng-click="vm.onReset()">Reset</button>
                                                    </formly-form>
                                                </form>
                                            </div>
                                            <img id="img1" class="img-thumbnail" src="http://placehold.it/350x150/7ba9d0/fff?text=Select+an+image+%3A%29" style="width:auto;height:auto;max-width:350px;max-height:250px" />
                </div>
            </td>
            <td>&nbsp;&nbsp;&nbsp;</td>
        </tr>
    </table>--%>
</body>

   <script type="text/javascript" src="Templates/Controller1.js"></script>
   <script type="text/javascript" src="Templates/Controller2.js"></script>

   <script>
       
           //var settings2 = new FormlySettings();
           //settings2.container = '#divFormly2';
           ////settings2.onloadCallback = Do2;
           ////settings2.shortcutCallback = DoSubmit;
           //settings2.callbackSuccess = Do2;
           //settings2.callbackReset = Reset1;
           //settings2.setLoad(settings2.createGetConfig('/api/Customers/LoadFields'));
           //settings2.setSend(settings2.createPostConfig('/api/Customers/Add'));
           //settings2.controllerName = 'MainCtrl2';

           //var settings1 = new FormlySettings();
           //settings1.container = '#divFormly1';
           ////settings1.onloadCallback = Do22;
           //settings1.callbackSuccess = Do22;
           ////settings1.shortcutCallback = DoSubmit2;
           //settings1.setLoad(settings1.createGetConfig('/api/Employee/LoadFields'));
           //settings1.setSend(settings1.createPostConfig('/api/Employee/Add'));
           //settings1.controllerName = 'MainCtrl1';

           var aSets = [settings1, settings2];

           FormlyManager(aSets);


       // http://stackoverflow.com/questions/27863434/upload-file-using-webapi-ajax
       var itMoment = moment();
       itMoment.lang('it')

       var m_imgData = null;



       //function Do2() {
       //    alert(2);
       //}

       //function Do22() {
       //    alert(22);
       //}

       //function Reset1() {
       //    $('#img1').attr('src', 'http://placehold.it/350x150/7ba9d0/fff?text=Select+an+image+%3A%29');
       //}

       function Reset2() {
           var appElement = document.querySelector("[ng-controller='MainCtrl2 as vm']");
           var appScope = angular.element(appElement).scope();
           var m_model = appScope.vm.model;

           appScope.vm.model = {};
           appScope.vm.model.DataAvvenimento = new Date();
           appScope.$apply();

           var model = {};
           model.DataAvvenimento = new Date();
           model.FotoArticolo = null;
           appScope.vm.model = angular.copy(model);

           appScope.vm.form.$setPristine();
           appScope.vm.form.$setUntouched();

           $('#img2').attr('src', 'http://placehold.it/350x150/7ba9d0/fff?text=Select+an+image+%3A%29');
           //extScope['MainCtrl2'].vm.model = {};
           //extScope['MainCtrl2'].$apply();
       }

       function DoSubmit() {

           var m_model = JSON.stringify(extScope.vm.model);

               $.ajax({
                   url: '/api/Customers/Add',
                   type: 'POST',
                   dataType: 'json',
                   data: m_model,
                   processData: false,
                   contentType: 'application/json; charset=utf-8',// not json
                   complete: function (data) {
                       
                       alert($.parseJSON(data.responseText));

                   },
                   error: function (response) {
                       console.log(response.responseText);
                   }
               });

       }

       function DoSubmit2() {

           var m_model = JSON.stringify(extScope.vm.model);

           $.ajax({
               url: '/api/Employee/Add',
               type: 'POST',
               dataType: 'json',
               data: m_model,
               processData: false,
               contentType: 'application/json; charset=utf-8',// not json
               complete: function (data) {

                   alert($.parseJSON(data.responseText));

               },
               error: function (response) {
                   console.log(response.responseText);
               }
           });

       }
       //function Do23() {

       //    var settings2 = new FormlySettings();
       //    settings2.container = '#divFormly2';
       //    //settings.shortcutCallback = DoSubmit;
       //    settings2.setLoad(settings2.createGetConfig('/api/Customers/LoadFields'));
       //    //settings2.setSend(settings.createPostConfig('/api/Emp/Upload'));

       //    FormlyManager(settings2);
       //}

       //function DoSubmit() {
       //    alert($('#formly_1_grayParrotDateTimePicker_DataAvvenimento_0').val());

       //    var model = new FormData();
       //    model.append('DataAvvenimento', $('#formly_1_grayParrotDateTimePicker_DataAvvenimento_0').val());
       //    //model.append('Email', $.trim($contestForm.find('[name="email"]').val().toLowerCase()));
       //    //model.append('City', $.trim($contestForm.find('[name="cuidad"]').val()));
       //    //model.append('Title', $.trim($contestForm.find('[name="title"]').val()));
       //    //model.append('Description', $.trim($contestForm.find('[name="description"]').val()));
       //    //model.append('CountryCode', 'co');
       //    //model.append('Image', $('#formly_1_upload_FotoArticolo_0')[0].files[0]);  // this has the file for sure
       //    model.append('Image', m_imgData);

       //    $.ajax({
       //        url: '/api/Employee/Upload',
       //        type: 'POST',
       //        dataType: 'json',
       //        data: model,
       //        processData: false,
       //        contentType: false,// not json
       //        complete: function (data) {
       //            var mediaId = $.parseJSON(data.responseText); //?

       //        },
       //        error: function (response) {
       //            console.log(response.responseText);
       //        }
       //    });
       //}

       function CheckCallback() {
           alert('DoCheck');
       }

       function ChangeCallback(options, scope) {
           alert('DoCheck on change');
       }

       function ShowImg2(options, scope) {
           //var inputf = $('#Image');

           var inputf2 = $('#' + scope.key).context.activeElement;

           readURL('#img2', inputf2);
       }

       function ShowImg(options, scope) {
           //var inputf = $('#'+scope.key);

           var inputf2 = $('#' + scope.key).context.activeElement;

           readURL('#img1', inputf2);
       }

       function readURL(target, input) {
           if (input.files && input.files[0]) {
               var reader = new FileReader();

               reader.onload = function (e) {
                   m_imgData = e.target.result;
                   $(target).attr('src', e.target.result);
               }

               reader.readAsDataURL(input.files[0]);
           }
       }

       //var idToEdit = GetQueryStringParams("id");

       //var settings = new FormlySettings();
       //settings.container = '#divFormly';
       //settings.callbackSuccess = SuccessCallback;

       //if (idToEdit == undefined) {
       //    settings.setLoad(settings.createGetConfig('/api/Employee/LoadFields'));
       //    //settings.setSend(settings.createPostConfig('/api/Employee/Add'));
       //} else {
       //    settings.setLoad(settings.createGetConfig('/api/Employee/LoadFields', { id: idToEdit }));
       //    //settings.setSend(settings.createPostConfig('/api/Employee/Edit'));
       //}

       //FormlyManager(settings);

       ////
       //function SuccessCallback(response) {

       //    ShowResponseMessage(response);

       //    //window.parent.CloseDialog();
       //}

   </script>

</html>